<template>
  <div id="box">
    {{ date | formaDate}}
  </div>
</template>
<script>
  var padaDate = function (value) {
    return value < 10 ? '0' + value : value
  }
  export default {
    data () {
      return {
        date: new Date()
      }
    },
    filters: {
      formaDate: function (value) {
        var date = new Date()
        var year = date.getFullYear()
        var month = padaDate(date.getMonth() + 1)
        var day = padaDate(date.getDate())
        var hours = padaDate(date.getHours())
        var minutes = padaDate(date.getMinutes())
        var seconds = padaDate(date.getSeconds())
        return year + '年' + month + '月' + day + '日 ' + hours + ':' + minutes + ':' + seconds
      }
    },
    mounted () {
      let _this = this // 声明一个变量指向Vue实例this，保证作用域一致
      this.timer = setInterval(() => {
        _this.date = new Date() // 修改数据date
      }, 1000)
    },
    beforeDestroy () {
      if (this.timer) {
        clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
      }
    }
  }
</script>
<style>
  #box {
    color: #7ECEF4;
  }
</style>
